<template>
	<view class="container">
		<!-- Header Section -->
		<view class="header">
			<text class="title">配送地址</text>
			<text class="add-address" @click="addAddress">新增配送地址</text>
		</view>

		<!-- Address List Section -->
		<view class="address-list" v-if="addressList.length > 0">
			<view class="address-item" v-for="(address, index) in addressList" :key="index">
				<!-- 隐藏域存储地址 id -->
				<input type="hidden" :value="address.id" name="addressId" class="hidden-input">
				<!-- 隐藏域存储地址 id -->
				<input type="hidden" :value="address.index" name="indexId" class="hidden-input">
				<view class="address-details">
					<!-- Name and Phone in one row with reduced spacing -->
					<view class="name-phone">
						<text class="name">{{ address.name }}</text>
						<text class="phone">{{ address.phoneNumber }}</text>
						<!-- 显示默认地址标识，添加类名 default-label-wrapper 方便样式控制 -->
						<view class="default-label-wrapper">
							<text v-if="address.isDefault" class="default-label">默认</text>
						</view>
					</view>
					<!-- Detailed address below the name and phone -->
					<text
						class="details">{{ address.province }}{{ address.city }}{{ address.district }}{{ address.detailedAddress }}</text>
				</view>
				<!-- Edit and Delete icons -->
				<view class="actions">
					<image class="icon" src="@/static/image/dizhixiugai.png" @click="editAddress(address)" />
					<image class="icon" src="@/static/image/dizhishanchu.png"
						@click="deleteAddress(index,address.id)" />
				</view>
			</view>
		</view>
		<view class="no-address" v-else>
			<text>暂无收货地址</text>
		</view>
	</view>
</template>

<script>
	import {
		addressApi
	} from '@/package/api/user_address.js';
	export default {
		data() {
			return {
				addressList: []
			};
		},
		onShow() {
			// 页面显示时从本地存储获取数据
			const storedAddressList = uni.getStorageSync('addressManagement');
			// config.log(uni.getStorageSync('addressManagement'))
			console.log('本地地址信息:', uni.getStorageSync('addressManagement'));
			if (storedAddressList && Array.isArray(storedAddressList)) {
				this.addressList = storedAddressList;
			} else {
				this.addressList = [];
			}
		},
		methods: {
			addAddress() {
				uni.navigateTo({
					url: '/package/pages/user_address_list/user_address_list'
				});
			},
			editAddress(address) {
				// 将点击的要修改的信息存储到本地存储
				uni.setStorageSync('editAddressInfo', address);


				console.log(uni.getStorageSync('editAddressInfo'))
				uni.navigateTo({
					url: '/package/pages/user_addressEdit/user_addressEdit'
				});
			},
			deleteAddress(index, addressId) {
				uni.showModal({
					title: '确认删除',
					content: '你确定要删除这个地址吗？',
					success: (res) => {
						if (res.confirm) {
							// 发送请求 删除地址
							addressApi.remove(addressId);

							this.addressList.splice(index, 1);
							// 删除后更新本地存储
							uni.setStorageSync('addressManagement', this.addressList);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 示例方法：设置默认地址（这里逻辑简单，可按需完善）
			setDefaultAddress(index) {
				this.addressList.forEach((addr, i) => {
					addr.isDefault = i === index;
				});
				// 设置默认地址后更新本地存储
				uni.setStorageSync('addressList', this.addressList);
			}
		}
	};
</script>

<style scoped>
	.container {
		background-color: #f2f2f2;
		padding: 15px;
		min-height: 100vh;
		position: relative;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 8px 12px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
	}

	.title {
		font-size: 17px;
		/* 原 18px，减小 1px */
		font-weight: bold;
		color: #333;
	}

	.add-address {
		background-color: #ff4f4f;
		color: white;
		padding: 6px 12px;
		font-size: 13px;
		/* 原 14px，减小 1px */
		border-radius: 20px;
		border: none;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.address-list {
		margin-top: 10px;
	}

	.address-item {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 12px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 12px;
	}

	.address-details {
		flex: 1;
		padding-right: 15px;
	}

	.name-phone {
		display: flex;
		/* 让姓名、手机号和默认地址标签在同一行显示 */
		justify-content: flex-start;
		/* 左对齐 */
		align-items: center;
		margin-bottom: 5px;
	}

	.name {
		font-size: 15px;
		/* 原 16px，减小 1px */
		font-weight: bold;
		color: #333;
		margin-right: 20px;
		/* 设置右边距为20px */
	}

	.phone {
		font-size: 13px;
		/* 原 14px，减小 1px */
		color: #ff4f4f;
	}

	.details {
		font-size: 11px;
		/* 原 12px，减小 1px */
		color: #777;
		margin-top: 5px;
	}

	.actions {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.icon {
		width: 15px;
		/* 原 20px，减小为 15px */
		height: 15px;
		/* 原 20px，减小为 15px */
		margin: 5px 0;
		cursor: pointer;
	}

	/* Floating Add Button at the Bottom Right */
	.add-address-float {
		background-color: #ff4f4f;
		color: white;
		padding: 6px 12px;
		font-size: 13px;
		/* 原 14px，减小 1px */
		border-radius: 25px;
		border: none;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		position: absolute;
		right: 80px;
		bottom: 20px;
		width: auto;
		height: auto;
	}

	/* 包裹默认标签的容器样式，用于控制与手机号的间距 */
	.default-label-wrapper {
		margin-left: 15px;
	}

	/* 默认标签样式，设置字体大小和背景颜色 */
	.default-label {
		color: white;
		font-size: 11px;
		/* 原 12px，减小 1px */
		background-color: orange;
		padding: 2px 5px;
		border-radius: 3px;
	}

	.no-address {
		text-align: center;
		color: #999;
		margin-top: 20px;
		font-size: 13px;
		/* 原 14px，减小 1px */
	}

	.hidden-input {
		display: none;
	}
</style>